<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录-校园电单车信息管理系统</title>
    <link
      rel="shortcut icon"
      href="images/favicontop.png"
      type="image/x-icon"
    />

    <!-- CDN引入viewUI start -->
    <link
      rel="stylesheet"
      href="http://unpkg.com/view-design/dist/styles/iview.css"
    />

    <style>
      /* 禁止选中 */

      * {
        padding: 0;
        margin: 0;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      body {
        /* 100%窗口高度 */
        background-color: #e8e8fd;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: hidden;
        /* background: linear-gradient(200deg,#f5ebe9 ,#fdf9ed); */
        display: flex;
        justify-content: center;
        align-items: center;
      }

      img {
        -webkit-user-drag: none;
      }

      .biggestBox {
        background-color: #ffe986;
        width: 1200px;
        height: 640px;
        border-radius: 26px;
        position: relative;
        box-shadow: 0px 23px 19px #d2cfff;
      }

      .right-bottom-img {
        width: 200px;
        height: auto;
        position: absolute;
        top: 440px;
        right: -85px;
        z-index: 102;
      }
      /* 登录框 */

      .login-box {
        position: absolute;
        top: 37%;
        right: 11%;
        width: 360px;
      }

      .img-box {
        position: absolute;
        z-index: 1;
        bottom: -90px;
        left: 100px;
        /* background-color: pink; */
      }

      .img-box img {
        display: block;
        width: 530px;
        height: auto;
      }
      /* left-box的样式 */

      .left-box {
        border-radius: 26px 0px 0px 26px;
        position: relative;
        width: 38.2%;
        height: 100%;
        background-color: #7d79f1;
      }
      /* a3ffff */

      .left-box .hh .hh1 {
        position: absolute;
        top: 30px;
        left: 40px;
        font-size: 40px;
        color: #ffffff;
      }

      .left-box .hh .hh2 {
        position: absolute;
        top: 90px;
        left: 80px;
        font-size: 40px;
        color: #ffffff;
      }

      .triangle {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-top: 640px solid transparent;
        border-right: 200px solid #ffe986;
        border-bottom: none;
        border-left: none;
      }
      /* 接下来是猫头鹰的样式 */

      .owl {
        z-index: 100;
        width: 314px;
        height: 162px;
        /* 背景图片猫头鹰的头 */
        background: url("images/bear.png") no-repeat;
        background-size: 100%;
        position: absolute;
        top: -155px;
        left: 52%;
        transform: translateX(-50%);
      }

      .owl .hand {
        position: absolute;
        left: 28px;
        bottom: -14px;
        /* 自己画两个圆充当猫头鹰的手 */
        width: 45px;
        height: 45px;
        border-radius: 40px;
        /* 8256db */
        background-color: #7d79f1;
        /* 沿着y轴缩放0.6倍（压扁） */
        transform: scaleY(0.6);
        /* ease-out:规定以慢速结束的过渡效果,完成该动画需要0.3s */
        transition: 0.3s ease-out;
      }

      .owl .hand.hand-r {
        left: 233px;
      }
      /* 定义密码焦点触发时猫头鹰手的样式 */

      .owl.password .hand {
        transform: translateX(58px) translateY(-15px) scale(0.5);
      }

      .owl.password .hand.hand-r {
        transform: translateX(-58px) translateY(-15px) scale(0.5);
      }

      .owl .arms {
        position: absolute;
        top: 94px;
        width: 100%;
        height: 62px;
        overflow: hidden;
      }
      /* 猫头鹰的手臂(翅膀) */

      .owl .arms .arm {
        position: absolute;
        left: 26px;
        top: 64px;
        z-index: 100;
        width: 51px;
        height: 83px;
        background: url("images/bear-arm.png") no-repeat;
        transform: rotate(-20deg);
        transition: 0.3s ease-out;
      }

      .owl .arms .arm.arm-r {
        transform: rotate(20deg) scaleX(-1);
        left: 232px;
      }
      /* 定义密码焦点触发时猫头鹰手臂(翅膀)的样式 */

      .owl.password .arms .arm {
        transform: translateY(-55px) translateX(60px);
      }

      .owl.password .arms .arm.arm-r {
        transform: translateY(-55px) translateX(-60px) scaleX(-1);
      }
      /* 输入框样式 */

      .ivu-input {
        width: 360px;
        height: 40px;
        font-size: 14px;
        padding: 0 10px;
      }

      .ivu-input-icon-clear {
        line-height: 45px;
      }

      .ivu-input-suffix {
        line-height: 45px;
      }

      .ivu-form-item {
        margin-bottom: 1vw;
      }

      .ivu-form-item:after {
        /* 两个表单之间的距离 */
        height: 15px;
      }

      .ivu-btn {
        /* 登录的button */
        width: 340px;
        height: 40px;
        /* margin: 10px 30px; */
        color: #fff;
        /* 860ace */
        background-color: #7d79f1;
        font-weight: 700;
        border-radius: 50px;
        border: 0;
        font-size: 14px;
      }

      .ivu-btn:hover {
        color: #ffffff;
        background-color: #516fc7;
        border: 0;
      }

      .ivu-btn-default {
        color: #fff;
        background-color: #aba8ff;
        border: 0;
      }
      /* 重置的button的样式直接在标签修改了 */

      .ivu-btn-primary {
        box-shadow: 0px 5px 10px #8c8bf0;
        border: 0;
      }

      .ivu-btn-primary:hover {
        /* 鼠标经过“登录按钮时的样式” */
        background-color: #3b5ec4;
        box-shadow: 0px 5px 10px #8090c2;
        border: 0;
      }

      .ivu-input-prefix i,
      .ivu-input-suffix i {
        color: #7d79f1;
      }

      .ivu-form-item-error-tip {
        font-size: 1vw;
        position: absolute;
        top: 100%;
        left: 0;
        line-height: 1;
        padding-top: 6px 0;
        color: #ed4014;
      }
    </style>
  </head>

  <body>
    <script src="js/vue.min.js"></script>
    <script src="http://unpkg.com/view-design/dist/iview.min.js"></script>
    <!-- CDN引入viewUI end -->

    <!-- jQuery的CDN引入 -->
    <script src="js/jquery.js"></script>
    <div class="biggestBox">
      <img
        class="right-bottom-img"
        src="images/undraw_new_message_re_fp03.svg"
        alt=""
      />
      <!-- <img class="right-bottom-img" src="images/undraw_team_chat_re_vbq1.svg" alt=""> -->
      <!-- <img class="right-bottom-img" src="images/undraw_inbox_cleanup_re_jcbh.svg" alt=""> -->
      <div class="img-box">
        <img src="images/logingif.svg" />
      </div>

      <!-- 放在左边的盒子 -->
      <div class="left-box">
        <div class="hh">
          <h1 class="hh1">电车管家</h1>
          <h1 class="hh2">管理平台</h1>
        </div>

        <!-- 里面的三角形 -->
        <div class="triangle"></div>
      </div>
      <div id="lottie"></div>
      <div
        id="login"
        style="display: flex; justify-content: center; align-items: center"
      >
        <div class="login-box">
          <!-- 猫头鹰 -->
          <div class="owl" id="owl">
            <!-- hand:手 -->
            <div class="hand"></div>
            <div class="hand hand-r"></div>
            <!-- 手臂 -->
            <div class="arms">
              <div class="arm"></div>
              <div class="arm arm-r"></div>
            </div>
          </div>

          <!-- 输入表单 -->
          <div>
            <i-form ref="formInline" :model="formInline" :rules="ruleInline">
              <form-item prop="phone">
                <i-input
                  clearable
                  v-model="formInline.phone"
                  type="text"
                  placeholder="手机号"
                  @on-enter="mysubmit"
                >
                  <!-- <i class="ivu-icon ivu-icon-md-person" slot="prepend" style="color: #714c53; "></i> -->
                </i-input>
              </form-item>
              <div>
                <form-item prop="password">
                  <i-input
                    password
                    @on-focus="passwordFocus"
                    @on-blur="passwordBlur"
                    ref="password"
                    @on-enter="mysubmit"
                    v-model="formInline.password"
                    type="password"
                    placeholder="密码"
                  >
                    <!-- <i class="ivu-icon ivu-icon-md-lock " slot="prepend " style="color: #714c53; "></i> -->
                  </i-input>
                </form-item>
              </div>
              <div style="text-align: center">
                <div style="display: block">
                  <i-button
                    type="primary"
                    :loading="loading"
                    type="button"
                    @click="mysubmit"
                    long
                  >
                    <span v-if="!loading" style="color: #fff">登录</span>
                    <span v-else>校验中...</span>
                  </i-button>
                </div>

                <div style="display: block; margin-top: 15px">
                  <i-button type="default" @click="reset" long>重置 </i-button>
                </div>
              </div>
            </i-form>
          </div>
        </div>

        <!-- <div class="clouds">
        </div> -->
        <div class="bicycle"></div>
        <!-- <Card style="position: absolute; top: 50%; right: 50%; width: 430px; height: 600px; padding: 30px; text-align: center; background-color: rgba(163, 154, 139,0.3); transform: translate(-10%,-50%); border-radius: 25px; ">

            <p slot="title " style="font-size: 19px;font-weight: bold;color: #714c53 ">管理员登录</p>
            <div style="margin-top: 50px; ">
                <i-form ref="formInline " :model="formInline " :rules="ruleInline " style="margin: 20px 0; ">
                    <form-item prop="username">

                        <i-input v-model="formInline.username " type="text " placeholder="用户名 " size="large " style="margin-bottom: 10px; ">
                            <i class="ivu-icon ivu-icon-md-person " slot="prepend " style="color: #714c53; "></i>
                        </i-input>
                    </form-item>
                    <form-item prop="password">
                        <i-input @on-enter="mysubmit();toloading() " v-model="formInline.password " type="password " placeholder="密码 " size="large ">
                            <i class="ivu-icon ivu-icon-md-lock " slot="prepend " style="color: #714c53; "></i>
                        </i-input>
                    </form-item>


                    <i-button style="width: 250px; height: 50px; margin:60px 0 20px 0; color: #fff; background-color: #714c53; border-radius: 15px; border: 1px solid #f5ebe9; " type="primary " :loading="loading " icon="ios-power " type="button
            " @click="mysubmit();toloading() " long>
                        <span v-if="!loading " style="color: #fff; ">登录</span>
                        <span v-else>校验中...</span>
                    </i-button>

                    <i-button style="width: 250px; height: 50px; color: black; background-color: #fff; border-radius: 15px; " icon="md-refresh " @click="reset " long>重置</i-button>
                </i-form>
            </div>
        </Card> -->
      </div>
    </div>
    <script>
      new Vue({
        el: "#login",
        data: {
          loading: false,
          formInline: {
            phone: "",
            password: "",
          },
          ruleInline: {
            phone: [
              {
                required: true,
                message: "请输入手机号。",
                trigger: "blur",
              },
            ],
            password: [
              {
                required: true,
                message: "请输入密码。",
                trigger: "blur",
              },
            ],
          },
        },
        methods: {
          passwordFocus() {
            $("#owl").addClass("password");
          },
          passwordBlur() {
            $("#owl").removeClass("password");
          },
          errorNotice(msg) {
            // view UI库组件
            this.$Notice.error({
              title: msg,
            });
          },
          spinShow() {
            this.$Spin.show({
              render: (h) => {
                return h("div", [
                  h("Icon", {
                    class: "demo-spin-icon-load",
                    props: {
                      type: "ios-loading",
                      size: 40,
                    },
                  }),
                  h("div", "登陆中"),
                ]);
              },
            });
          },
          spinHide() {
            this.$Spin.hide();
          },
          mysubmit() {
            var that = this;
            if (!that.formInline.phone) {
              that.errorNotice("请输入手机号");
            } else if (!that.formInline.password) {
              that.errorNotice("请输入密码");
            } else {
              this.loading = true;
              $.ajax({
                url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/User/find_user",
                type: "POST",
                data: {
                  phone: that.formInline.phone,
                  password: that.formInline.password,
                },
                async: true,
                timeout: 60000,
                success(res) {
                  console.log(res);
                  if (res.error_code == 0) {
                    sessionStorage.setItem("phone", res.phone);
                    sessionStorage.setItem("username", res.username);
                    that.spinShow();
                    setTimeout(function () {
                      window.location.href = "index.html";
                      that.spinHide();
                    }, 100);

                    that.loading = false;
                  } else {
                    that.loading = false;
                    that.errorNotice("手机号或密码不正确");
                  }
                },
                error(res) {
                  that.loading = false;
                  that.errorNotice("ajax请求失败");
                  console.log(res);
                },
              });
            }
          },
          reset() {
            this.formInline.phone = "";
            this.formInline.password = "";
          },
        },
        mounted() {
          $("i-form").submit(function (e) {
            e.preventDefault();
          });

          if (
            /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
              navigator.userAgent
            )
          ) {
            console.log("移动设备端访问。");
            window.location.href = "nonsupport.html";
          } else {
            console.log("pc电脑端访问。");
          }
        },
      });
    </script>
  </body>
</html>
